<template>
  <div>
    <v-ace-editor
      v-model:value="_value"
      :lang="lang"
      theme="monokai"
      :options="optionsData"
      class="vue-ace-editor"
      :readonly="props.readOnly"
      ref="editor"
      @getAceInstance="getAceInstance"
    />
  </div>
</template>

<script setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
import { VAceEditor } from "vue3-ace-editor";
import "./aceConfig";
let emit = defineEmits(["change", "error"]);
const lang = ref("javascript");
let editor = ref(null);
let props = defineProps({
  value: {
    type: String,
    default: "",
  },
  readOnly: {
    type: Boolean,
    default: false,
  },
});
let _value = computed({
  get() {
    return props.value;
  },
  set(val) {
    emit("change", val);
  },
});
watch(_value, () => {
  let error = editor.value
    .getAceInstance()
    .session.getAnnotations()
    .filter((it) => it.type == "error");
  // console.log("error", error);
  emit("error", error);
});

const optionsData = reactive({
  useWorker: true, // 启用语法检查,必须为true
  enableBasicAutocompletion: true, // 自动补全
  enableLiveAutocompletion: true, // 智能补全
  enableSnippets: true, // 启用代码段
  showPrintMargin: false, // 去掉灰色的线，printMarginColumn
  highlightActiveLine: false, // 高亮行
  highlightSelectedWord: true, // 高亮选中的字符
  tabSize: 4, // tab锁进字符
  fontSize: 14, // 设置字号
  wrap: false, // 是否换行
  // readOnly: false, // 是否可编辑
  minLines: 30, // 最小行数，minLines和maxLines同时设置之后，可以不用给editor再设置高度
  maxLines: 30, // 最大行数
});

const getAceInstance = (val) => {
  console.log("getAceInstance", val);
};
</script>
